<script type="text/javascript" language="javascript">
    	(function($) {
        /*whatever jQuery stuff*/
        $(function(){
			jQuery.validator.addMethod("UsernameValid", function(value, element, param) {
                var returnVal = true;				
				$.ajax({
					url:'<?php echo get_url(2);?>/ajax_username_valid',
					type:'post',
					data:({
						username : value
					}),
					async:false,
					success: function(data){
						if(data==1){
							returnVal = false;
						}
					}
				});
				return returnVal;
           	}, jQuery.validator.messages.UsernameValid);
			
			jQuery.validator.addMethod("EmailValid", function(value, element, param) {
                var returnVal = true;
				$.ajax({
					url:'<?php echo get_url(2);?>/ajax_email_valid',
					type:'post',
					data:({
						email : value
					}),
					async:false,					
					success: function(data){
						if(data==1){
							returnVal = false;
						}
					}
				});
				return returnVal;
           	}, jQuery.validator.messages.EmailValid);
			
			jQuery.validator.addMethod("IDCardValid", function(value, element, param) {
                var returnVal = true;
				$.ajax({
					url:'<?php echo get_url(2);?>/ajax_id_card_valid',
					type:'post',
					data:({
						id_card : value
					}),
					async:false,					
					success: function(data){
						if(data==1){
							returnVal = false;
						}
					}
				});
				return returnVal;
           	}, jQuery.validator.messages.IDCardValid);
										
            $("#Form").validate({
				ignore: "",
                rules: {
					username: {
						required: true,
						UsernameValid: true
					},
					password: { 
						required: true,
						equalTo : "#confirmpass"
					},
					confirmpass: "required",
					email: {
						required:true,
						email:true,
						EmailValid:true,
						equalTo : "#confirmmail"
					},
					confirmmail: "required",
					id_card: {
						required:true,
						IDCardValid:true
					}
                },
                showErrors: function(errorMap, errorList){
                    var messages='';
                    for (var i = 0; i < errorList.length; i++) {					
                        messages += '- '+errorList[i].message+'\n';
                    }
                    if(messages) alert("กรุณาตรวจสอบ: \n"+"¯¯¯¯¯¯¯¯¯¯ \n"+ messages);
                    //this.defaultShowErrors();
                } ,
                onfocusout: false,
                onkeyup: false,
				onclick: false,					
                messages: {
					username: {
						required : "คุณยังไม่ได้กรอก Username สามารถกรอกด้วย a-z,A-Z,0-9",
						UsernameValid : "Username ไม่ถูกต้องหรือมีอย่ในระบบแล้ว"
					},
					password: {
						required : "คุณยังไม่ได้กรอก Password",
						equalTo : "รหัสผ่านไม่ตรงกัน"
					},
					confirmpass: "ยืนยัน Password ไม่ถูกต้อง",
					email: {
						required : "กรุณากรอกอีเมล์ให้ถูกต้อง",
						email : "คุณยังไม่ได้กรอกอีเมล์หรืออีเมล์ไม่ถูกต้อง",
						EmailValid : "อีเมล์นี้มีอยู่ในระบบแล้ว",
						equalTo : "อีเมล์ไม่ตรงกัน"
					},
					confirmmail: "กรุณายืนยันอีเมล์ให้ถูกต้อง",
					id_card: {
						required : "คุณยังไม่ได้กรอกหมายเลขบัตรประชาชน",
						IDCardValid : "กรอกหมายเลขบัตรประชาชนให้ถูกต้อง"
					}
                }
            });
		});
	}
)(jQuery);

</script>

<div id="left_side">
	<div id="register">
		<h2>สมาชิกใหม่</h2>
		<p>มาเป็นส่วนหนึ่งของสังคม you2play.com สังคมของคนคอเดียวกัน สังคมของคนรักเสียงเพลง</p>
	<form action="result" method="post" id="Form" name="Form">
	<table>
		<tr>
			<td class="column1">ชื่อผู้ใช้งาน</td>
			<td class="column2"><input class="signup" type="text" name="username" maxlength="20" /></td>
			<td><font color="red">*</font><input type="button" value="ตรวจสอบ"/></td>
		</tr>
		<tr>
			<td class="column1">รหัสผ่าน</td>
			<td class="column2"><input class="signup" id="password" type="password" name="password" /></td>
			<td><font color="red">*</font></td>
		</tr>
		<tr>
			<td class="column1">ยืนยันรหัสผ่าน</td>
			<td class="column2"><input class="signup" id="confirmpass" type="password" name="confirmpass" /></td>
			<td><font color="red">*</font></td>
		</tr>
		<tr>
			<td class="column1">อีเมล์</td>
			<td class="column2"><input class="signup" id="email" type="text" name="email" /></td>
			<td><font color="red">*</font></td>
		</tr>
		<tr>
			<td class="column1">ยืนยันอีเมล์</td>
			<td class="column2"><input class="signup" id="confirmmail" type="text" name="confirmmail" /></td>
			<td><font color="red">*</font></td>
		</tr>
		<tr>
			<td height="20"></td>
		</tr>
		<tr>
			<td class="column1">ชื่อ</td>
			<td class="column2"><input class="signup" type="text" name="firstname" /></td>
		</tr>
		<tr>
			<td class="column1">นามสกุล</td>
			<td class="column2"><input class="signup" type="text" name="lastname" /></td>
		</tr>
		<tr>
			<td class="column1">หมายเลขบัตรประชาชน</td>
			<td class="column2"><input class="signup" type="text" name="id_card" maxlength="13" /></td>
			<td><font color="red">*</font><input type="button" value="ตรวจสอบ" /></td>
		</tr>
		<tr>
			<td class="column1">เพศ</td>
			<td class="column2">
				<select name="gender">
					<option value="ไม่ระบุ">ไม่ระบุ</option>
					<option value="ชาย">ชาย</option>
					<option value="หญิง">หญิง</option>
					<option value="อื่นๆ">อื่นๆ</option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="column1">วันเกิด</td>
			<td class="column2">
				<select name="date">
					<option>วัน</option>
				<?php for($d=1;$d<=31;$d++): $d2=sprintf("%02d",$d);?>
					<option value="<?php echo $d2; ?>"><?php echo $d2; ?></option>
				<?php endfor; ?>
				</select>
				<select name="month">
					<option>เดือน</option>
					<option value="01">มกราคม</option>
					<option value="02">กุมภาพันธ์</option>
					<option value="03">มีนาคม</option>
					<option value="04">เมษายน</option>
					<option value="05">พฤษภาคม</option>
					<option value="06">มิถุนายน</option>
					<option value="07">กรกฎาคม</option>
					<option value="08">สิงหาคม</option>
					<option value="09">กันยายน</option>
					<option value="10">ตุลาคม</option>
					<option value="11">พฤศจิกายน</option>
					<option value="12">ธันวาคม</option>
				</select>
				<select name="year">
					<option>ปี</option>
					<?php $y = date('Y'); ?>
					<option value="<?php echo $y;?>"><?php echo $y;?></option>
					<?php for($i=1;$i<80;$i++): ?>
					<option value="<?php echo $y-$i;?>"><?php echo $y-$i;?></option>
					<?php endfor;?>
				</select>
			</td>
		</tr>
		<tr>
			<td height="20"></td>
		</tr>
		<tr>
			<td class="column1">การศึกษา</td>
			<td class="column2">
				<select class="select" name="education">
					<option value="--- ไม่ระบุ ---">--- ไม่ระบุ ---</option>
					<option value="ประถมศึกษา">ประถมศึกษา</option>
					<option value="มัธยมศึกษา">มัธยมศึกษา</option>
					<option value="ปวช./ปวส.">ปวช./ปวส.</option>
					<option value="อนุปริญญา">อนุปริญญา</option>
					<option value="ปริญญาตรี">ปริญญาตรี</option>
					<option value="ปริญญาโท">ปริญญาโท</option>
					<option value="สูงกว่าปริญญาโท">สูงกว่าปริญญาโท</option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="column1">อาชีพ</td>
			<td class="column2">
				<select class="select" name="career">
					<option value="--- ไม่ระบุ ---">--- ไม่ระบุ ---</option>
					<option value="นักเรียน,นักศึกษา">นักเรียน,นักศึกษา</option>
					<option value="พนักงานบริษัทเอกชน">พนักงานบริษัทเอกชน</option>
					<option value="พนักงานรัฐวิสาหกิจ/พนักงานราชการ">พนักงานรัฐวิสาหกิจ/พนักงานราชการ</option>
					<option value="ธุรกิจส่วนตัว">ธุรกิจส่วนตัว</option>
					<option value="อื่นๆ">อื่นๆ</option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="column1">รายได้ต่อเดือน</td>
			<td class="column2">
				<select class="select" name="income">
					<option value="ไม่ประสงค์ให้ข้อมูล">ไม่ประสงค์ให้ข้อมูล</option>
					<option value="น้อยกว่า 10,000 บาท">น้อยกว่า 10,000 บาท</option>
					<option value="10,001 - 20,000 บาท">10,001 - 20,000 บาท</option>
					<option value="20,001 - 30,000 บาท">20,001 - 30,000 บาท</option>
					<option value="30,001 - 40,000 บาท">30,001 - 40,000 บาท</option>
					<option value="40,001 - 50,000 บาท">40,001 - 50,000 บาท</option>
					<option value="50,001 - 60,000 บาท">50,001 - 60,000 บาท</option>
					<option value="มากกว่า 60,000 บาท">มากกว่า 60,000 บาท</option>
				</select>
			</td>
		</tr>
		<tr>
			<td height="20"></td>
		</tr>
		<tr>
			<td class="column1">ที่อยู่</td>
			<td class="column2"><textarea class="address" name="address"></textarea></td>
		</tr>
		<tr>
			<td class="column1">โทรศัพท์ที่ติดต่อได้</td>
			<td class="column2"><input class="signup" type="text" name="phone" maxlength="11" /></td>
		</tr>
		<tr>
			<td></td>
		</tr>
	</table>
	
	<div class="newsletter"><font color="red">หมายเหตุ : *ข้อมูลสำคัญจำเป็นต้องระบุ</font><br/><br/><input type="checkbox" checked="checked" name="newsletter" value="1"/> คุณต้องการรับอีเมล์แจ้งข่าวสาร จากทางเว็บ you2play.com (สามารถยกเลิกบริการได้ในภายหลัง)</div>
	<div class="btnSubmit"><input type="image" src="../assets/images/member/btn_signup.gif" name="submit" value="ลงทะเบียน" /></div>
	</form>
	</div>
</div>
<div id="right_side">
	<!--Module-->
	<?php
	if(!empty($module))
	foreach($module as $value):?>
	<?php echo $value;?>
	<?php endforeach;?>
</div>
<div class="clear">
</div>